<!doctype html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="./bower_components/foundation/css/normalize.css"/>
    <link rel="stylesheet" href="./bower_components/foundation/css/foundation.css"/>
</head>
<body>
<style type="text/css">
    .border{
        border:1px red solid;
    }
    .lightblue{
        background-color: lightblue;
    }
    .lightcoral{
        background-color: lightcoral;
    }
</style>
<div class="ui">

    <div class="row large">
        <div class="large-4 columns border">
            <div class="large-4 columns lightblue">1</div>
            <div class="large-4 columns lightcoral">2</div>
            <div class="large-4 columns lightblue">3</div>
        </div>
        <div class="large-4 columns">2</div>
        <div class="large-4 columns">3</div>
    </div>
</div>
<hr>

<form>
    <div class="row collapse">
        <div class="small-3 large-2 columns">
            <span class="prefix">http://</span>
        </div>
        <div class="small-9 large-10 columns">
            <input type="text" placeholder="Enter your URL...">
        </div>
    </div>
    <div class="row">
        <div class="large-12 columns">
            <div class="row collapse">
                <div class="small-10 columns">
                    <input type="text" placeholder="Hex Value">
                </div>
                <div class="small-2 columns">
                    <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <div class="row collapse prefix-radius">
                <div class="small-3 columns">
                    <span class="prefix">Label</span>
                </div>
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="row collapse postfix-radius">
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
                <div class="small-3 columns">
                    <span class="postfix">Label</span>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="large-6 columns">
            <div class="row collapse prefix-round">
                <div class="small-3 columns">
                    <a href="#" class="button prefix">Go</a>
                </div>
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
            </div>
        </div>
        <div class="large-6 columns">
            <div class="row collapse postfix-round">
                <div class="small-9 columns">
                    <input type="text" placeholder="Value">
                </div>
                <div class="small-3 columns">
                    <a href="#" class="button postfix">Go</a>
                </div>
            </div>
        </div>
    </div>
</form>

</body>
</html>